<template>
  <a-layout class="pageAll">
		<a-layout-sider
		  breakpoint="sm"
		  collapsed-width="0"
		  v-model="collapsed"
		  :trigger="null"
		  collapsible>
		  <!-- theme="light" -->
		  <div class="Navlogo" @click="indexClick">
        <a-icon type="schedule" />
        <router-link  to="/Home">授权管理系统</router-link>
      </div>

		  <a-menu theme="dark" mode="inline" :open-keys="openNavList"  @openChange="onOpenNav">
			  <a-sub-menu :key="nav.MenuID" v-for="nav in NavBarData">
				<span slot="title"><a-icon :type="nav.Icon" />{{nav.MenuTitle}}</span>
				<a-menu-item :key="nChild.MenuID" v-for="nChild in nav.Children">
				   <router-link :to="nChild.MenuPath">{{nChild.MenuTitle}}</router-link>
				</a-menu-item>
			  </a-sub-menu>
		  </a-menu>
		</a-layout-sider>

		<a-layout >
		  <a-layout-header class="pageHead">
			  <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"
			  class="triggerIcon headTool" @click="() => (collapsed = !collapsed)" />
			  <a-switch class="openMethod headTool" checked-children="Tab" un-checked-children="Cover" :checked="isOpenRemember"  @change="changeOpenType" />
		  </a-layout-header>

		  <a-layout-content class="pageCont">
			  <a-spin  tip="Loading..." :spinning="loading" >
				  <a-tabs v-show='isOpenRemember' size="small" class="pgTab"
				  :activeKey="actPage"
				  hide-add type="editable-card"
				  @tabClick="changePage"  @edit="onDelPage">
					<a-tab-pane v-for="(pg,pgInd) in pageTabList" :key="pgInd" :tab="pg.title" :closable="pgInd!=0"></a-tab-pane>
				  </a-tabs>

				  <router-view class="moduleAll" :class="{hasTab:isOpenRemember}" />
			  </a-spin>
		  </a-layout-content>

		  <a-layout-footer style="textAlign: center">
			  WJC ©2020 Created by HZ
		    </a-layout-footer>
		  </a-layout>
	  </a-layout>
</template>

<script>
import { mapState } from 'vuex'

export default {
		computed: {
			...mapState([
				'isOpenRemember',
				'pageTabList',
				'actPage',
			])
		},
		data(){
			return{
				loading:true,
				collapsed: false,
				openNavList:[],
				NavBarData:[{
						MenuTitle:"授权管理",
						Icon:"transaction",
						MenuID:100,
						Children:[{
							MenuID:101,
							MenuTitle:"授权列表",
							MenuPath:"/AuthDetail",
						}],
					},{
						MenuTitle:"授权日志",
						Icon:"hdd",
						MenuID:1,
						Children:[{
							MenuID:2,
							MenuTitle:"记录列表",
							MenuPath:"/LogDetail",
						}],
					}]
			}
		},
		mounted() {
			setTimeout(()=>{//假装加载。。。
				this.loading=false
			},500)
      //Message,页面顶部的通知
      this.$message.success('登录成功', 2.5, ()=>{//带callback的
            this.$message.success("欢迎使用");//普通的
       });
		},
		methods: {
			changeOpenType(e){
				this.$store.commit('changeOpenRemember',e)
			},
			changePage(e){
				if(e!=this.actPage){
					this.$store.commit('changeActPage',e)
					this.$router.push({path:this.pageTabList[e].path})
				}

			},
			onDelPage(e){
				let arr=this.pageTabList,len=arr.length;
				if(e==len-1&&this.actPage==e){//删的是最后一页
					this.$router.push({path:this.pageTabList[len-2].path})
				}
				this.$store.commit('delPage',e)
			},
			onOpenNav(e){
				let endKey=e.pop();
				this.openNavList=endKey?[endKey]:[];
      },
      indexClick(e){

      }
		}
	}
</script>

<style lang="scss" scoped>
	.pageAll{
		width: 100vw;
		height:100vh;
		.Navlogo{
      cursor: pointer;
			  height: 32px;
			  background-color: #642fb5;
        opacity: 0.7;
			  margin: 16px;
        color:#ffffff;
        display: flex;
	      justify-content: center;
	      align-items: center;
	      align-content: center;
	      flex-wrap: wrap;
        .anticon {
          margin-right: 5px;
        }
		}
		.pageHead{
			padding: 0 ;
			display: flex;
			align-items: center;
			.headTool{
				margin: 0 10px;
			}
			.triggerIcon {
			  font-size: 18px;
			  line-height: 100%;
			  cursor: pointer;
			  color: #ffffff;
			  transition: color 0.3s;
			}
		}
		.pageCont{
			overflow: hidden;
			padding:10px;
			height: 100%;
			.pgTab{
				.ant-tabs-bar{
					margin: 0;
				}
				.ant-tabs-card-bar,.ant-tabs-tab{
					height: 26px;
					line-height: 26px;
					font-size: 12px;
				}
			}
			.moduleAll{
				width: 100%;
				background-color: #ffffff;
				height: calc(100vh - 64px - 20px);
				overflow-y: auto;
				&.hasTab{

					height: calc(100vh - 64px - 20px - 26px);
				}
			}
		}
	}
</style>
